<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
    <style>
        * {
            font-family: 'Microsoft JhengHei' !important;
        }

        .reveal pre code {
            background-color: #120;
        }

        h5, h6 {
            text-transform: none !important;
        }

        h6 {
            text-align: start;
            line-height: 50px !important;
            font-size: 22px !important;
        }

        xmp {
            margin: 0;
            background: #120;
            color: #fff;
            margin-top: 16px;
            display: block;
        }
    </style>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h4>小课堂[萌新分院]</h4>
            <h4>什么是控制器？</h4>
            <h4>分享人：张晓琳</h4>
        </section>
        <section>
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section>
            <section>
                <h3>1.背景介绍</h3>
            </section>
            <section>
                <h6>
                    在学习angular的过程中，不同于javascript，遇到了许多新的概念，<br>
                    比如指令（directive）、服务（service）、控制器（controller）、模型（model）等。<br>
                    还接触到了MVC这种将数据管理、业务逻辑控制和数据展示分离开，<br>
                    AngularJS的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。
                    当然如果我们能够把业务逻辑放到后端的REST服务中，就可以开发轻量级AngularJS应用。
                    涉及到多个控制器中使用的业务逻辑，需要放到一个公共的服务中，然后把改服务注入使用到该业务逻辑的控制器中。
                    进而使程序的逻辑性和可维护性更强的思想。接下来，分享、讨论一下控制器的用法。<br>
                </h6>
            </section>
        </section>
        <section>
            <section>
                <h3>2.知识剖析</h3>
            </section>
            <section>
                <h6>
                    1.  理解MVC控制器 <br>
                </h6>
            </section>
            <section>
                <h6>
                    在AngularJS的控制器中，构造函数会有$scope参数。<br>
                    当一个控制器通过ng-controller指令连接到DOM上，<br>
                    Angular将实例化一个新的控制器对象，然后调用指定的控制器的构造函数。<br>
                    一个新的子作用范围(scope)将被创建，并作为一种可注入的参数传递给控制器的构造函数为$scope。<br>
                    如果控制器使用controller as语法附加到DOM上，<br>
                    那么控制器实例将被分配给新的$scope范围。<br>
                    并且多了一个和as同名的属性，然后把自己指向这个属性，就方便我们访问了。<br>
                </h6>
            </section>
            <section>
                <h6>
                    控制器的作用<br>
                    在控制器中初始化模型(添加属性)<br>
                    创建控制器并将它附加到DOM元素之后，AngularJS会创建一个子作用域。<br>
                    子作用域保存着对应控制器的数据模型。子作用域可以通过$scope来获取。<br>
                </h6>
            </section>
            <section>
                <a href="../demo/控制器/controller.html" target="_blank">demo</a>
            </section>
            <section>
                <h6>
                    1.  控制器作用域<br>
                    因为控制器是附加到DOM元素上，所以存在着一个视图，有多个控制器。<br>
                    控制器之间可以是并列的，也可以是嵌套的形式存在。<br>
                    2.  视图中控制器并列<br>
                    各个控制器从附加DOM元素节点开始，<br>
                    到节点对应闭合标签结束的地方创建了一个子控制域，<br>
                    单个控制器里面的$scope对象只能访问和调用该控制器范围内的属性和方法。<br>
                    3.  视图中控制器嵌套<br>
                    默认情况下，AngularJS在当前作用域中无法找到某个属性,就会在父级作用域中进行查找。<br>
                    即子级控制器会继承父级控制器中的对象。但是子级作用域和父级作用域中有相同的属性，<br>
                    子级使用自己的作用域。这个时候子级作用域要访问父级作用域的属性可以通过$parent。<br>
                    类似JavaScript本身的原型链方式。
                    4.  何为ControllerAs<br>
                    AngularJS提供$scope方式来处理Controller<br>
                </h6>
            </section>
            <section>
                <a href="../demo/控制器/controller1.html" target="_blank">demo</a>
            </section>
        </section>
        <section>
            <section>
                <h3>3.常见问题</h3>
            </section>
            <section>
                <h6>
                    如何在多个controller中进行信息的沟通？<br>
                </h6>
            </section>
        </section>
        <section>
            <section>
                <h3>4.解决方案</h3>
            </section>
            <section>
                <h6>
                    方法一：利用作用域继承的原理，子控制器访问父级控制器中的内容。<br>
                    方法二：使用service服务进行数据传输。<br>
                    在之前的例子我们提到，controller是相对独立的，两个controller之间，<br>
                    内存是不共享的，同级DOM下，两个controller是无法互相访问其中的属性或者方法的。<br>
                    那么，在实际项目中，我们会有很多的页面和控制器，<br>
                    不同页面下的controller之间有时候是需要传输数据的，<br>
                    之前我们学习了localStorage，用于页面之间的传参。<br>
                    其实，官方建议页面之间通过service互相访问。<br>
                </h6>
            </section>
        </section>
        <section>
            <section>
                <h3>5.编码实战</h3>
            </section>
        </section>
        <section>
            <section>
                <h3>6.扩展思考</h3>
            </section>
            <section>
                <h5>问题: 在多个controller中进行信息的沟通还有哪些？</h5>
                <a href="http://blog.csdn.net/lai_xu/article/details/49612915" class="fragment" target="_blank">ngularJs项目实战: 不同controller作用域之间通信的方式</a>
            </section>
        </section>
        <section>
            <section>
                <h3>7.参考文献</h3>
            </section>
            <section style="text-align: left">
                <h6><a href="https://link.zhihu.com/?target=https%3A//docs.angularjs.org/guide/controller" class=" wrap external" target="_blank" rel="nofollow noreferrer">Controller官方介绍</a></h6>
                <h6><a href="https://link.zhihu.com/?target=http%3A//www.cnblogs.com/yuzhongwusan/p/5337889.html" class=" wrap external" target="_blank" rel="nofollow noreferrer">angularjs 嵌套控制器，子控制器访问父控制器</a></h6>
                <h6><a href="https://link.zhihu.com/?target=http%3A//www.cnblogs.com/whitewolf/p/3493362.html" class=" wrap external" target="_blank" rel="nofollow noreferrer">angular controller as syntax vs scope</a></h6>
                <h6><a href="https://link.zhihu.com/?target=http%3A//pinkyjie.com/2015/02/09/controller-as-vs-scope/" class=" wrap external" target="_blank" rel="nofollow noreferrer">用$scope还是用controller as</a></h6>
            </section>
        </section>
        <section>
            <section>
                <h3>8.更多讨论</h3>
            </section>
            <section>
                <h4>讨论：大家对angularJs中的控制器还有哪些理解？</h4>
            </section>
        </section>
        <section>
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p>
                By
                <small style="vertical-align: middle">张晓琳</small>
            </p>
        </section>
    </div>
</div>
<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
</script>
</body>
</html>
